<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<html>
<f:view>
	<head>
	<title>Edit event detail</title>
	<style type="text/css">
	  .orders {
	     border: 2px solid black; 
	  }
	  .ordersHeader {
	     text-align: center;
	     font-style: italic;
	     color: Snow;
	     background: Teal;
	  }
	  .oddRow {
	     height: 25px;
	     text-align: left;
	     background: MediumTurquoise;
	  }
	  .evenRow {
	     text-align: left;
	     background: PowderBlue;
	  }
  </style>
	</head>

	<body>
	<h1>

		<h:outputText value="Edit Event Detail" />

	</h1>
	
 	<h:messages errorStyle="color: #ff0000" globalOnly="true"/>


	<h:form id="editEventDetailForm">
		<hr />
		<h:panelGrid columns="6">
			<h:outputText value="#{eventController.user.emailAddress}" />
			<h:outputText value="&nbsp;&nbsp;-&nbsp;&nbsp;" escape="false" />
			<h:commandLink action="#{homeController.home}">
				<f:param value="#{eventController.user.id}" name="userId" />
				<h:outputText value="Home" />
			</h:commandLink>
			<h:commandLink action="#{myEventsController.listMyEvents}">
				<f:param value="#{eventController.user.id}" name="userId" />
				<h:outputText value="My Events" />
			</h:commandLink>
			<h:commandLink action="#{manageAccountController.manageAccount}">
				<f:param value="#{eventController.user.id}" name="userId" />
				<h:outputText value="My Account" />
			</h:commandLink>
			<h:commandLink action="#{loginController.logout}">
				<h:outputText value="Log Out" />
			</h:commandLink>
		</h:panelGrid>
		<hr />
			<h:outputText value="<br/>" escape="false"/>
             
			 <h:outputText id="summary"/>
             	<h:message for="summary" style="color: Red" />
           	<h:outputText value="<br/>" escape="false"/>
             	
        <h2>
        	<h:panelGroup>
        		<h:outputText value="Event Information - "/>
        		<h:commandLink action="#{eventController.editEventInformation}">
					<h:outputText value="Edit" />
					<f:param value="#{eventController.event.id}" name="eventId"></f:param>
					<f:param value="#{eventController.user.id}" name="userId" />
				</h:commandLink>
        	</h:panelGroup>
        </h2>
             
		<h:panelGrid columns="2">
			<h:outputText value="Event coordinator : " />
			<h:panelGroup>
			<h:outputText value="#{eventController.user.lastName}" />
			<h:outputText value=", " />
			<h:outputText value="#{eventController.user.firstName}" />
			</h:panelGroup>
			<h:outputText value="Event name: " />
		
			<h:outputText id="name" value="#{eventController.event.name}" />
			
			
			<h:outputText value="Event descripton: " />
		
			<h:outputText value="#{eventController.event.description}" />
		
			<h:outputText value="Start date: " />
	
			
			<h:outputText value="#{eventController.event.startDate}">
     			<f:convertDateTime type="date" pattern="MM/dd/yyyy"/>
  			</h:outputText>
				
			
			<h:outputText value="End date: " />
			
			<h:outputText id="endDate" value="#{eventController.event.endDate}">
     			<f:convertDateTime type="date" pattern="MM/dd/yyyy"/>
  			</h:outputText>
		
			
			<h:outputText value="Start time: " />
		
			<h:panelGroup>
				 <h:outputText value="#{eventController.event.startTime}">
     				<f:converter converterId="com.ochnas.volunteersignup.ui.TimeConverter"/>
  				</h:outputText>
  				<h:outputText value="#{eventController.currTimeZone}"/>
			</h:panelGroup>
			
		
			<h:outputText value="End time: " />
	
			<h:panelGroup>
				 <h:outputText id="endTime" value="#{eventController.event.endTime}">
     				<f:converter converterId="com.ochnas.volunteersignup.ui.TimeConverter"/>
  				</h:outputText>
  				<h:outputText value="#{eventController.currTimeZone}"/>
			</h:panelGroup>
		
		</h:panelGrid>
		
		<h:outputText value="<br/><br/>" escape="false" />
	<h2>
		<h:panelGroup>
			<h:outputText value="Positions :" />
			<h:commandLink action="#{eventController.createPosition}">
				<h:outputText value="Create a new position." />
				<f:param value="#{eventController.event.id}" name="eventId"></f:param>
			</h:commandLink>
		</h:panelGroup>
	</h2>
		<h:dataTable value="#{eventController.event.positions}" var="position"
		border="1" styleClass="orders">
			<h:column>
				
				<h3>
					<h:panelGrid columns="4">
					<h:outputText value="Position: "></h:outputText>	
					<h:outputText value="#{position.name}"></h:outputText>	
					<h:outputText value=" - "></h:outputText>	
					<h:commandLink action="#{eventController.removePosition}">
						<h:outputText value="Remove position." />
						<f:param value="#{position.id}" name="positionId"></f:param>
					</h:commandLink>
					</h:panelGrid>
				</h3>
	          
	            
	            <ul>
	            	<h:panelGrid columns="2" border="1" styleClass="orders">
		   		        <h:outputText value="Description:"/>
		   		        <h:outputText value="#{position.description}"/>
		   		        <h:outputText value="Required number of volunteers:"/>
		   		       
			   		        <h:outputText value="#{position.requiredNumberOfVolunteers}"/>
			
		        	</h:panelGrid>
		        	<br>
		        	<h:dataTable  value="#{eventController.mapOfPositionVolunteers[position.id]}" var="positionVolunteer" border="1"
				        		rowClasses="oddRow, evenRow">
									<h:column>
						               	<h:panelGroup>
						               		<h:outputText value="#{positionVolunteer.user.lastName}"/>
						               		<h:outputText value=","/>
						               		<h:outputText value="#{positionVolunteer.user.firstName}"/>
						               	</h:panelGroup>
						            </h:column>				        			

									<h:column>
						               	<h:outputText value="#{positionVolunteer.user.emailAddress}"/>
						            </h:column>	
									<h:column>
									<h:commandLink  action="#{eventController.removePositionVolunteer}">
										<h:outputText value="Remove volunteer." />
										<f:param value="#{position.id}" name="positionId"/>
										<f:param value="#{positionVolunteer.user.id}" name="positionVolunteerId"/>
									</h:commandLink>				               
									
						            </h:column>						            			        		
						        </h:dataTable>     
		        
		        	<h4>
		        	<h:panelGroup>
		  
		        		<h:outputText value="Time slots: "/>
			            <h:commandLink action="#{eventController.createTimeSlot}">
							<h:outputText value="Create a new time slot." />
							<f:param value="#{position.id}" name="positionId"/>
						</h:commandLink>
		        	</h:panelGroup>
		        	</h4>
			        	<h:dataTable  value="#{position.timeSlots}" var="timeSlot" border="1" styleClass="orders"
			        	rowClasses="oddRow,evenRow">
							<h:column>
				         <h:panelGrid columns="3">
				                <h:outputText value="#{timeSlot.startTime}">
				               		<f:converter converterId="com.ochnas.volunteersignup.ui.TimeConverter"/>
				                </h:outputText>
				 				
				 				<h:outputText value=" to "/>
				
				                <h:outputText value="#{timeSlot.endTime}">
				               		<f:converter converterId="com.ochnas.volunteersignup.ui.TimeConverter"/>
				                </h:outputText>
				            </h:panelGrid>
				            </h:column>		
							<h:column>
				           
				                <h:panelGroup>
				                	<h:outputText value="Required number: "/>
					                <h:outputText value="#{timeSlot.quantityOfVolunteers}"/>
				                </h:panelGroup>
				                <br>
				                <h:outputText value="Current volunteers for this time slot: "/>
				                <br>
				        		<h:dataTable  value="#{eventController.mapOfTimeSlotVolunteers[timeSlot.id]}" var="timeSlotVolunteer" border="1"
				        		styleClass="orders">
									<h:column>
						                <f:facet name="header"><h:outputText value="Name [last name, fisrt name]" /> </f:facet>
						               	<h:panelGroup>
						               		<h:outputText value="#{timeSlotVolunteer.user.lastName}"/>
						               		<h:outputText value=","/>
						               		<h:outputText value="#{timeSlotVolunteer.user.firstName}"/>
						               	</h:panelGroup>
						            </h:column>				        			

									<h:column>
						                <f:facet name="header"><h:outputText value="Email Address" /> </f:facet>
						               	<h:outputText value="#{timeSlotVolunteer.user.emailAddress}"/>
						            </h:column>	
									<h:column>
									<h:commandLink action="#{eventController.removeTimeSlotVolunteer}">
										<h:outputText value="Remove volunteer." />
										<f:param value="#{timeSlot.id}" name="timeSlotId"/>
										<f:param value="#{timeSlotVolunteer.user.id}" name="timeSlotVolunteerId"/>
									</h:commandLink>				                
						            </h:column>						            			        		
						        </h:dataTable>        
				                
				            </h:column>				            		            
							<h:column>
							<h:commandLink action="#{eventController.removeTimeSlot}">
								<h:outputText value="Remove time slot." />
								<f:param value="#{timeSlot.id}" name="timeSlotId"/>
							</h:commandLink>				                
				            </h:column>
				        </h:dataTable>
			        
	         	</ul>
            </h:column>
		</h:dataTable>
		
	</h:form>
	</body>
</f:view>
</html>